
let canvas = document.getElementsByTagName("canvas")[0];
let pen = canvas.getContext("2d");
pen.lineWidth = 5;
let { offsetWidth, offsetHeight } = canvas;
document.getElementsByTagName("article")[0].addEventListener("click", function (e) {
    let event = e || window.event;
    if (event.target.value == "清除画布") {
        pen.clearRect(0, 0, offsetWidth, offsetHeight);
    }
    if (event.target.localName == "span") {
        [...document.getElementsByTagName("span")].map(items => items.classList.remove("check"));
        event.target.classList.add("check");
        pen.strokeStyle = getNodeStyle(event.target).backgroundColor;
    }
});
document.getElementsByTagName("article")[0].addEventListener("change", function (e) {
    let event = e || window.event;
    if (event.target.type == "range") {
        pen.lineWidth = event.target.value;
    }
    if (event.target.type == "color") {
        pen.strokeStyle = event.target.value;
    }
});

canvas.addEventListener("mousedown", function (e) {
    let event = e || window.event;
    pen.beginPath();
    pen.moveTo(event.offsetX, event.offsetY);
    canvas.addEventListener("mousemove", move);
    function move(e) {
        let event = e || window.event;
        pen.lineTo(event.offsetX, event.offsetY);
        pen.stroke();
    }
    document.addEventListener("mouseup", function (e) {
        canvas.removeEventListener("mousemove", move);
    });
});